<template>
    <div style="margin: 10px 10px">
      <div style="margin-bottom: 10px">
        <el-input v-model="searchRecName" placeholder="请输入学生姓名" style="width: 150px;margin-right: 5px"></el-input>
        <el-button type="primary" @click="searchByName">搜索</el-button>
      </div>
      <div>
        <el-table
          :data="recruitStus"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="recruitStuName"
            align="center"
            label="姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuPhone"
            align="center"
            label="电话"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuPurpose"
            align="center"
            label="招生目的"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuSex"
            align="center"
            label="性别"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuTeachername"
            align="center"
            label="辅导员姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuTeacherphone"
            align="center"
            label="辅导员联系方式"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuClassname"
            align="center"
            label="班级名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuCollege"
            align="center"
            label="所在学院"
            width="150">
          </el-table-column>
          <el-table-column
            prop="recruitStuGraduated"
            align="center"
            label="毕业高中"
            width="150">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="modifyRecStu(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="提示"
          top="10px"
          @close="handlerClose"
          :visible.sync="dialogVisible"
          width="30%">
          <el-form
            label-width="110px"
            :model="recruitStu">
            <el-form-item label="姓名">
              <el-input v-model="recruitStu.recruitStuName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="recruitStu.recruitStuPhone"></el-input>
            </el-form-item>
            <el-form-item label="招生目的">
              <el-input v-model="recruitStu.recruitStuPurpose"></el-input>
            </el-form-item>
            <el-form-item label="学生性别">
              <el-input v-model="recruitStu.recruitStuSex"></el-input>
            </el-form-item>
            <el-form-item label="辅导员姓名">
              <el-input v-model="recruitStu.recruitStuTeachername"></el-input>
            </el-form-item>
            <el-form-item label="辅导员联系方式">
              <el-input v-model="recruitStu.recruitStuTeacherphone"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
              <el-input v-model="recruitStu.recruitStuClassname"></el-input>
            </el-form-item>
            <el-form-item label="所在学院">
              <el-input v-model="recruitStu.recruitStuCollege"></el-input>
            </el-form-item>
            <el-form-item label="毕业高中">
              <el-input v-model="recruitStu.recruitStuGraduated"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateRec">确 定</el-button>
          </span>
        </el-dialog>
        <el-pagination
          style="margin-top: 10px"
          @current-change="currentChange"
          :current-page="currentPage"
          background
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import { initRecStu, editRecStu, getByName } from '../../../api/tea/recStu'

export default {
  data() {
    return {
      currentPage: 1,
      total: 10,
      dialogVisible: false,
      searchRecName: '',
      recruitStus: [{
        recruitStuId: 1,
        recruitStuName: '',
        recruitStuPhone: '',
        recruitStuPurpose: '',
        recruitStuSex: '',
        recruitStuTeachername: '',
        recruitStuTeacherphone: '',
        recruitStuClassname: '',
        recruitStuCollege: '',
        recruitStuGraduated: ''
      }],
      recruitStu: {
        recruitStuId: 0,
        recruitStuName: '',
        recruitStuPhone: '',
        recruitStuPurpose: '',
        recruitStuSex: '',
        recruitStuTeachername: '',
        recruitStuTeacherphone: '',
        recruitStuClassname: '',
        recruitStuCollege: '',
        recruitStuGraduated: ''
      }
    }
  },
  methods: {
    handlerClose(){
      this.recruitStu = {
        recruitStuId: 0,
        recruitStuName: '',
        recruitStuPhone: '',
        recruitStuPurpose: '',
        recruitStuSex: '',
        recruitStuTeachername: '',
        recruitStuTeacherphone: '',
        recruitStuClassname: '',
        recruitStuCollege: '',
        recruitStuGraduated: ''
      }
    },
    // 通过招生学生姓名搜索
    searchByName() {
      console.log(this.searchRecName)
      if (this.searchRecName === ''){
        this.currentChange(this.currentPage)
      } else {
        getByName(this.searchRecName,1).then(response=>{
          console.log(response)
          this.recruitStus = response.data.records
          this.total = response.data.total
        })
      }
    },
    // 修改学生信息
    modifyRecStu(row) {
      let old = JSON.stringify(row);
      this.recruitStu = JSON.parse(old)
      this.dialogVisible = true
    },
    updateRec() {
      editRecStu(this.recruitStu).then(response=>{
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.currentChange(this.currentPage)
        this.dialogVisible = false
      })
    },
    // 当前页面数据
    currentChange(page){
      this.currentPage = page;
      initRecStu(page).then(response=>{
        if (response.data == null){
          this.recruitStus = []
          this.total = 10
        }else {
          this.recruitStus = response.data.records
          this.total = response.data.total
        }
        console.log(response)
      })
    }
  },
  created() {
    this.currentChange(1)
  }
}
</script>

<style scoped>

</style>
